<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <title>404 | Page not found.</title>
    <!--引入vue.js-->
    <script src="/static/elementui/vue.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="/static/jquery/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <!-- 引入element ui 样式 -->
    <link rel="stylesheet" href="/static/elementui/index.css">
    <!-- 引入组件库 -->
    <script src="/static/elementui/index.js"></script>
</head>
<style>
    html{
        filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        -webkit-filter: grayscale(1);
    }
    .wscn-http404-container{
        width: 100vw;
        height: 100vh;
    }
    .wscn-http404 {
        width: 80vw;
        margin: 0 auto;
        margin-top: 16vh;
        overflow: hidden;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
    }
    .pic-404 {
        position: relative;
        width: 40vw;
        overflow: hidden;
    }
    .pic-404__parent {
        width: 100%;
    }
    .pic-404__child {
        position: absolute;
    }
    .pic-404 .left {
        width: 80px;
        top: 17px;
        left: 220px;
        opacity: 0;
        animation-name: cloudLeft;
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
        animation-delay: 1s;
    }
    .pic-404 .mid {
        width: 46px;
        top: 10px;
        left: 420px;
        opacity: 0;
        animation-name: cloudMid;
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
        animation-delay: 1.2s;
    }
    .pic-404 .right {
        width: 62px;
        top: 100px;
        left: 500px;
        opacity: 0;
        animation-name: cloudRight;
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
        animation-delay: 1s;
    }
    @keyframes cloudLeft {
        0% {
            top: 17px;
            left: 220px;
            opacity: 0;
        }
        20% {
            top: 33px;
            left: 188px;
            opacity: 1;
        }
        80% {
            top: 81px;
            left: 92px;
            opacity: 1;
        }
        100% {
            top: 97px;
            left: 60px;
            opacity: 0;
        }
    }
    @keyframes cloudMid {
        0% {
            top: 10px;
            left: 420px;
            opacity: 0;
        }
        20% {
            top: 40px;
            left: 360px;
            opacity: 1;
        }
        70% {
            top: 130px;
            left: 180px;
            opacity: 1;
        }
        100% {
            top: 160px;
            left: 120px;
            opacity: 0;
        }
    }
    @keyframes cloudRight {
        0% {
            top: 100px;
            left: 500px;
            opacity: 0;
        }
        20% {
            top: 120px;
            left: 460px;
            opacity: 1;
        }
        80% {
            top: 180px;
            left: 340px;
            opacity: 1;
        }
        100% {
            top: 200px;
            left: 300px;
            opacity: 0;
        }
    }
    .bullshit {
        position: relative;
        float: left;
        width: 40vw;
        padding: 30px 0;
        overflow: hidden;
    }
    .bullshit__oops {
        font-size:60px;
        font-weight: bold;
        line-height: 40px;
        color: #1482f0;
        opacity: 0;
        margin-bottom: 20px;
        animation-name: slideUp;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
    }
    .bullshit__headline {
        font-size: 20px;
        line-height: 24px;
        color: #222;
        font-weight: bold;
        opacity: 0;
        margin-bottom: 10px;
        animation-name: slideUp;
        animation-duration: 0.5s;
        animation-delay: 0.1s;
        animation-fill-mode: forwards;
    }
    .bullshit__info {
        font-size: 13px;
        line-height: 21px;
        color: grey;
        opacity: 0;
        margin-bottom: 30px;
        animation-name: slideUp;
        animation-duration: 0.5s;
        animation-delay: 0.2s;
        animation-fill-mode: forwards;
    }
    .bullshit__return-home{
        display: block;
        float: left;
        width: 120px;
        height: 36px;
        background: #1482f0;
        border-radius:30px;
        text-align: center;
        color: #ffffff;
        opacity: 0;
        font-size: 14px;
        line-height: 36px;
        cursor: pointer;
        animation-name: slideUp;
        animation-duration: 0.5s;
        animation-delay: 0.3s;
        animation-fill-mode: forwards;
    }
    @keyframes slideUp {
        0% {
            transform: translateY(60px);
            opacity: 0;
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }
    @media screen and (max-width: 600px){
        .pic-404{
            display: none;
        }
        .bullshit{
            width: 300px;
        }
    }
</style>

<body>
<div class="wscn-http404-container">
    <div class="wscn-http404">
        <div class="pic-404">
            <img class="pic-404__parent" src="/static/tzss-img/error_images/error.png" alt="">
            <img class="pic-404__child left" src="/static/tzss-img/error_images/cloud.png" alt="">
            <img class="pic-404__child mid" src="/static/tzss-img/error_images/cloud.png" alt="">
            <img class="pic-404__child right" src="/static/tzss-img/error_images/cloud.png" alt="">
        </div>
        <div class="bullshit">
            <div class="bullshit__oops">404!</div>
            <div class="bullshit__info">
                We’re sorry but it appears that we can’t find the page you were looking for. Usually this occurs because of a page that previously existed was removed or you’ve mistyped the address.
            </div>
            <div class="bullshit__headline">Page not found</div>
            <div class="bullshit__info">Please check that the URL you entered is correct or click the button below to return to the previous page.
            </div>
            <a href="javascript:history.back(-1)" class="bullshit__return-home">GO BACK</a>
        </div>
    </div>
</div>


</body>
</html>